鐵人賽終於也進入尾聲了~ (加上今天還剩下4天)

我們也終於來到規劃中最後的篇章 --- 3D繪圖篇

而我們今天要討論的題目是 ~『2D圖片上面的3D圖樣是怎麼產生的?』

是搞錯了什麼嗎? 為什麼會想要在2D渲染環境的系列文裡面討論3D?

之所以會規劃這個篇章，主要是因爲我注意到很多人似乎不理解3D圖像的產生原理，

甚至有些人可能覺得canvas應該也存在某種api，可以讓人直接畫出3D物件，就像我們在用ctx.arc()畫圓一樣。

我們今天的文主要是輕鬆愜意的理論講解，沒有什麼困難的實作片段，所以大家可以放心～

3D 其實是一種假象

一定有人好奇過 ~ 明明電腦螢幕上面呈現的畫面都是2D的，那為什麼會有3D動畫的存在呢?

3D 的視覺效果到底是怎麼產出的? 如果我要在畫面上畫出一個3D的方塊，有什麼原生的方法嗎?

例如，像是這種感覺：

ctx.drawCube(x,y,z,size,color)

實際上，圖像之所以有3D/2D的區別，那是經由人類的眼睛觀測才有的定義。

而對電腦來說，任何的圖像其實都是由像素組成的二維陣列，也就是2D圖像

 那麼按照你這種說法，我用2D渲染環境的api難道也可以做出3D效果嗎？

『是的沒錯。』

3D物件與其說是3D效果，不如說他其實是一種視覺上的假象。

再繼續講這部分的理論之前，我可能需要先給各位科普一下一個概念，那就是 『透視(Perspective)』。

什麼是『透視』

咦？你是要講解怎麼用哆拉Ａ夢的道具偷看靜香洗澡嗎？

咳呃。。當然不是。

所謂的『透視(Perspective)』其實是一種繪畫的技法

大家應該都有在漫畫中看過這種街景的仿畫。圖畫中我們可以看到：

越遠的景物，會被畫得越小，而當東西被放在極遠處，他的大小就會縮成一個點。

這個就是『透視』的基本概念：『近大遠小』，而當視野延伸到極遠處時，所有景物都會縮小成一個的點

我們把這種點稱為消失點（有些人會叫消點）。

一張以正確的透視理論技法來繪製的圖片，可能會有多個消點。

美術系上課常常會提到一點透視、兩點透視還有三點透視，指的就是畫面中消點的數量。

像上面這張街景圖，他就是一個典型的一點透視，我們可以發現在馬路的末端存在一個消點，而且就只有這麼一個。

普通人光憑想像力可能沒辦法在腦海裡面描繪出來兩點透視還有三點透視的樣子，所以我這邊找了一張圖片給各位參考~

不過其實兩點透視還有三點透視對今天要講的主題來說沒什麼太大關聯性，所以關於『透視』的科普就讓我們先在這打住～

如果對透視學原理還有興趣的人，可以考慮看這篇 ： https://news.gamme.com.tw/1443732?fbclid=IwAR0cNVzdfQs_fLIjbPMYEEataEs03eC-tRBwEIuNwAOI_ApkRx4L8w6DMIg

透視理論與3D景深

從上述的透視概念講解中，我們可以發現，透視構圖中，物體的大小和物體與觀察者的距離，具有某種`比例關係，

在現實生活中我們其實也常常可以體會到類似的案例，例如我們看遠方的行人走路，當行人已經走了10公尺，但是在我們眼裡，他移動的距離卻看起來極短。

我們來看看下面這張圖：

我們如果用一點透視的方法去把兩顆球的樣子畫在紙上，假設在這個距離(w)下離紙比較近的球，我把他的尺寸畫成原本的0.8倍，請問比第一顆球還要離紙稍遠z單位的球，會被畫成多大?

像這樣的問題探討的就是3D景深的實際原理，各位可以思考一下答案會是什麼。

為了避免一次破太多梗，所以今天的講解大概就先到這~答案就留到下回分曉

我們明天會再繼續後續的探討~